<div class="child-box">
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a href="javascript:" lay-href=""> <i class="iconfont iconhome"></i>首页</a>
            <a><cite>我的财务</cite></a>
            <a><cite>账务明细</cite></a>

            <div class="layui-card-header-left" title="刷新" zmark-event="layui.manage.render">
                <i class="layui-icon layui-icon-refresh layui-anim" zmark-anim="layui-anim-rotate"></i>
            </div>
        </div>
    </div>
    <div class="layui-card mt20">
        <div class="layui-card-body table-box">
            <form class="layui-form" method="post" id="form-transaction-list" onsubmit="return false" lay-filter="form-transaction-list">
                <input type="hidden" name="transactionType"/>
                <input type="hidden" name="dateCreatedStart"/>
                <input type="hidden" name="dateCreatedEnd"/>
                <div class="layui-row block pb10">
                    <ul class="extra-l fl" id="queryTransactionType">
                        <li><a href="javascript:" class="curr" transactionType="">全部</a></li>
                        <li class="fore2">
                            <div class="search-box" style="width: 420px">
                                <input type="text" name="transactionNo" class="layui-input" placeholder="交易单号" style="width: 368px" />
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="search-transaction-list"><i class="layui-icon layui-icon-search"></i></button>
                            </div>
                        </li>
                    </ul>
                    <div class="fr">
                        当前余额：<h2 style="display: inline-block" id="transaction-list-out-balance">0.00</h2>
                    </div>
                </div>
                <div class="layui-row">
                    <table class="zm-tab order-tab" id="tab-transaction-list">
                        <colgroup>
                            <col width="100">
                            <col width="140">
                            <col>
                            <col width="160">
                            <col width="160">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>分类</th>
                            <th>
                                <div class="more-operation" zmark-more-operation="layui.transactionList.setDate" id="transaction-list-date">
                                    <div class="more-operation-txt"><div></div><b></b><span class="blank"></span></div>
                                    <div class="more-operation-list">
                                        <ul></ul>
                                    </div>
                                </div>
                            </th>
                            <th>交易详情</th>
                            <th>交易金额</th>
                            <th>当前余额</th>
                        </tr>
                        </thead>
                    </table>
                    <div class="blank-list">
                        <i class="iconfont iconwushuju"></i>
                        <dd>无交易数据</dd>
                    </div>
                    <div class="zm-pagination">
                        <div id="transaction-list-pagination"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/html" id="tpl-transaction-list">
    {{# layui.each(d,function(i,o){ }}
    <tbody>
        <tr class="tab-no-border">
            <td class="t-a-c">
                 <i class="iconfont ico-transaction {{o.transactionType}}" title="{{o.transactionTypeDesc}}"></i>
            </td>
            <td>
                <p>{{layui.com.conversionDays(o.dateCreated)}}</p>
                <p class="color-grey">{{o.dateCreated.split(' ')[1]}}</p>
            </td>
            <td>
                <p>{{o.transactionTypeDesc}}：{{o.transactionNo}}</p>
                <p class="color-grey">{{layui.com.removeNull(o.memo)}}</p>
            </td>
            <td class="t-a-r">
                {{#if(o.transactionCategory=='income'){}}
                <span class="color-red f14">+￥{{layui.com.formatCurrency(o.amount)}}</span>
                {{#}else{}}
                <span class="success-color f14">-￥{{layui.com.formatCurrency(Math.abs(o.amount))}}</span>
                {{#}}}
            </td>
            <td class="t-a-r f14">
                {{#if(o.balance>=0){}}
                <span class="color-red f14">+￥{{layui.com.formatCurrency(o.balance)}}</span>
                {{#}else{}}
                <span class="success-color f14">-￥{{layui.com.formatCurrency(Math.abs(o.balance))}}</span>
                {{#}}}
            </td>
        </tr>
    </tbody>
    {{# }); }}
</script>
<script>
    layui.use('transactionList', layui.factory('transactionList'));
</script>